<template>
  <ContentLayout>
    <EvForm
      :dataSourceFormOptions="{ dataSourceForm, dataSourceFormItems, dataSourceFormRule }"
      ref="workstationForm"
      :colomnCount="4"
      :autoWidth="false"
      :monitoring="true"
    >
      <template #color_templete="{ scope }">
        <ColorSelect v-model="scope.selectedColor"></ColorSelect>
      </template>
      <template #custom>
        <EvButton type="primary" icon="el-icon-edit" @click="seeTableContent">查看表单绑定内容</EvButton>
        <EvButton type="success" icon="el-icon-check" @click="cleanTableContent">表单内容清空</EvButton>
      </template>
    </EvForm>
  </ContentLayout>
</template>

<script>
import EvForm from "@/components/EvForm";
import ContentLayout from "@/layout/contentLayout.vue";
import ColorSelect from "@/components/EvForm/colorSelect.vue";
export default {
  components: { EvForm, ContentLayout, ColorSelect },
  data() {
    return {
      resource: "ProductionLine",
      microservices: "function-productionLine",
      id: 169985721700002,
      dataSourceForm: {
        code: "",
        name: "",
        type: "",
        currentProduct: "",
        currentVersion: "",
        memo: "",
        selectedColor: "",
        productMaterialCode: "10010190030",
        responsibleId: [170070671600002, 170070673600002],
      },
      dataSourceFormRule: {
        code: [{ required: true, message: "请填写产线编号", trigger: "change" }],
        name: [{ required: true, message: "请填写产线名称", trigger: "change" }],
        responsibleId: [{ required: true, message: "请填写产线名称", trigger: "change" }],
      },
      dataSourceFormItems: [
        {
          label: "产线编号",
          model: "code",
          placeholder: "请输入产线编号",
          type: "input",
        },
        {
          label: "function-producline.production_line_name",
          model: "name",
          placeholder: "请输入产线名称",
          type: "input",
        },
        {
          label: "产线类型",
          model: "type",
          placeholder: "请选择产线类型",
          type: "select",
          options: [],
        },
        {
          label: "当前工艺路径",
          model: "currentProduct",
          placeholder: "请选择工艺路径",
          type: "select",
          relation: ["currentVersion"],
          lock: "currentVersion",
          options: [],
          change: this.selectVersion,
        },
        { label: "产线颜色", model: "selectedColor", placeholder: "请选择产线颜色", slot: "color_templete" },
        {
          type: "formSelect",
          label: "装箱物料名称",
          model: "productMaterialCode",
          auto: false,
          options: [],
          fieldLabel: "materialName",
          fieldValue: "materialCode",
          columns: [
            { type: "radio", fixed: "left", align: "center", width: 50 },
            { title: "序号", align: "center", width: 60, type: "seq" },
            { title: "物料名称", field: "materialName", align: "center" },
            { title: "物料编号", field: "materialCode", align: "center" },
          ],
          bind: {
            clearable: true,
            placeholder: "请选择装箱物料",
            dataSourceFormOptions: {
              dataSourceForm: { materialName: "", materialCode: "" },
              dataSourceFormItems: [
                { type: "input", label: "物料名称", model: "materialName", placeholder: "请输入物料名称" },
                { type: "input", label: "物料编号", model: "materialCode", placeholder: "请输入物料编号" },
              ],
              dataSourceFormRule: {},
            },
            colomnCount: 2,
            microservices: "function-base-data",
            resource: "Material",
            modelCustom: {
              modelField: ["materialName", "materialCode"],
              modelRule: (Fields) => {
                return `${Fields.materialName}(${Fields.materialCode})`;
              },
            },
          },
        },
        {
          type: "formSelects",
          label: "责任人",
          model: "responsibleId",
          auto: false,
          fieldLabel: "data.name",
          fieldValue: "data.id",
          fieldLock: ["data.name"],
          columns: [
            { type: "checkbox", fixed: "left", align: "center", width: 50 },
            { title: "序号", align: "center", width: 60, type: "seq" },
            { title: "部门", field: "department.title", align: "center" },
            { title: "部门id", field: "department.id", align: "center" },
            { title: "姓名", field: "data.name", align: "center" },
            { title: "姓名id", field: "data.id", align: "center" },
          ],
          bind: {
            dataSourceFormOptions: {
              dataSourceForm: { department: { title: "", id: "" }, data: { name: "", id: "" } },
              dataSourceFormItems: [
                { type: "input", label: "部门", model: "department.title", placeholder: "请输入部门名称" },
                { type: "input", label: "部门id", model: "department.id", placeholder: "请输入部门名称" },
                { type: "input", label: "姓名", model: "data.name", placeholder: "请输入负责人姓名" },
                { type: "input", label: "姓名id", model: "data.id", placeholder: "请输入负责人姓名" },
              ],
              dataSourceFormRule: {},
            },
            colomnCount: 2,
            microservices: "function-user",
            resource: "DepartmentUser",
          },
        },
        { label: "备注", model: "memo", placeholder: "请输入备注", type: "textarea", span: 24 },
      ],
    };
  },
  async mounted() {
    await this.getTechnologyProcess();
    this.getDictionarys();
  },
  methods: {
    selectVersion(value) {
      this.$server()
        .erdfRequest(
          `/server/${this.microservices}/base/${this.resource}/selectVersion`,
          [169985721700002, value],
          "post"
        )
        .then((res) => {
          const versionNameOptions = res;
          console.log(versionNameOptions);
          this.$refs.workstationForm.optionsDeal("currentVersion", versionNameOptions);
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    onCurrentVersionChange(value) {
      console.log(value);
    },
    seeTableContent() {
      this.$refs.workstationForm.validate().then((valid) => {
        if (valid) {
          this.$message({
            message: "验证通过",
            type: "success",
          });
        } else {
          this.$message({
            message: "验证失败",
            type: "error",
          });
        }
      });
    },
    cleanTableContent() {
      this.$refs.workstationForm.resetFields();
    },
    getDictionarys() {
      let titles = "产线状态,产线类型,工站状态";
      this.$server()
        .batchQueryDictionary(titles)
        .then((response) => {
          const typeOptions = response
            .filter((item) => {
              return item.title === "产线类型";
            })[0]
            .details.map((item) => {
              return {
                value: item.k,
                label: item.v,
              };
            });
          this.$refs.workstationForm.optionsDeal("type", typeOptions);
        })
        .catch((response) => {
          this.$message.error(response.message);
        });
    },
    async getTechnologyProcess() {
      return new Promise((resovole) => {
        this.$server()
          .erdfRequest(
            `/server/${this.microservices}/base/${this.resource}/selectTechnologicalPath`,
            [169985721700002],
            "post"
          )
          .then((res) => {
            const technologyProcessOptions = res.map((item) => ({
              label: item.technologicalName,
              value: item.id,
            }));
            this.$refs.workstationForm.optionsDeal("currentProduct", technologyProcessOptions);
            resovole();
          })
          .catch((response) => {
            this.$message.error(response.message);
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.default-status {
  color: white;
  border: none;
}

.table-operate-button {
  cursor: pointer;
  margin-right: 10px;
  display: inline-block;
  border: 1px solid;
  border-radius: 14px;
  padding: 2px 10px;
  text-decoration: none;
}

.drag-btn {
  cursor: move;
  font-size: 16px;
}
</style>
